<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h2>人员列表-第一种写法</h2>
      <ul>
        <!-- 和Java中的For-each循环一样，注意也要用插值表达式获取数据 -->
        <!-- key一定要写，用作唯一标识，key涉及到页面Dom的Diff算法 -->
        <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
      </ul>

      <h2>人员列表-第二种写法</h2>
      <ul>
        <!-- 可以接收最多两个参数（括号非强制，但是建议加确保兼容），第一个是对象，第二个是下标，可作为key保证唯一 -->
        <li v-for="(p,index) in persons" :key="index">
          {{p.name}}-{{p.age}}-{{index}}
        </li>
      </ul>

      <hr />

      <h2>遍历对象</h2>
      <ul>
        <!-- 对象要用 of 连接遍历，第一个为属性值，第二个为属性名 -->
        <li v-for="(value,name) of car" :key="name">
          <!-- 遍历对象就不用再通过.获取了，可直接使用 -->
          {{name}}-{{value}}
        </li>
      </ul>

      <h2>遍历字符串（用的少）</h2>
      <ul>
        <!-- 遍历字符串，第一个为单个字符数值，第二个为下标。也可直接引用 -->
        <li v-for="(char,index) of str" :key="index">{{index}}-{{char}}</li>
      </ul>

      <h2>遍历指定次数（用的少）</h2>
      <ul>
        <!-- 遍历指定次数，第一个为从1开始的顺序，第二个为下标。也可直接引用 -->
        <li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        //创建一个集合，集合内都是对象
        persons: [
          {
            //每个对象都应该有唯一标识
            id: "001",
            name: "张三",
            age: 18,
          },
          {
            id: "002",
            name: "里斯",
            age: 20,
          },
          {
            id: "003",
            name: "王五",
            age: 22,
          },
        ],
        car: {
          name: "星瑞",
          price: 11,
          color: "黑色",
        },
        str: "hello",
      },
    });
  </script>
</html>
